<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华南农业大学实验室报修系统</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{~/mobile/common.css}" type="text/css">
</head>
<body>
    <div>
        <p style="display:inline-block">您好，报修人${session.cWechatUser.name!}</p>
        <a style="display:inline-block;" href="/mobile/logout.html" class="weui-btn weui-btn_mini weui-btn_warn">退出登录</a>
    </div>



    <div class="weui-tab">
        <div class="weui-navbar">
            <a class="weui-navbar__item weui-bar__item--on" href="#tabSubmit">
                报修
            </a>
            <a class="weui-navbar__item" href="#tab1" onclick="getData('all', $('#area1'))">
                全部记录
            </a>
            <a class="weui-navbar__item" href="#tab2" onclick="getData('notEnd', $('#area2'))">
                未完成记录
            </a>
            <a class="weui-navbar__item" href="#tab3" onclick="getData('end', $('#area3'))">
                已完成记录
            </a>
        </div>
        <div class="weui-tab__bd">
            <div id="tabSubmit" class="weui-tab__bd-item weui-tab__bd-item--active">
                <div class="weui-cells__title" style="font-size: 20px;">华南农业大学实验室报修系统</div>
                <form id="recordForm" method="post" action="/mobile/repair/submit">
                    <input type="hidden" name="wechatOpenid" value="${openid!}">
                    <div class="weui-cell weui-cell_select weui-cell_select-after">
                        <div class="weui-cell__hd">
                            <label  class="weui-label">报修区域</label>
                        </div>
                        <div class="weui-cell__bd">
                            <select class="weui-select" name="area" id="areaSelect">
                                @@ for(area in areas){ $$
                                <option value="${area.id}">${area.name}</option>
                                @@ } $$
                            </select>
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label  class="weui-label">房间号</label>
                        </div>

                        <div class="weui-cell__bd">
                            <select class="weui-select" name="room" id="roomSelect">

                            </select>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell_select weui-cell_select-after">
                        <div class="weui-cell__hd">
                            <label  class="weui-label">故障类型</label>
                        </div>
                        <div class="weui-cell__bd">
                            <select class="weui-select" name="classify" id="classifySelect">

                            </select>
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label">设备名称</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="equipmentName" placeholder="请在此输入设备名称...">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">设备编号</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text"  placeholder="请在此输入设备编号..." name="equipmentId">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">登记人</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text"  placeholder="请在此输入登记人姓名..." name="registrantName">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">学号或职工号（选填）</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" name="registrantNumber" placeholder="请在此输入学工号或职工号...">
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text"  placeholder="请在此输入手机号以通知维修结果...">
                        </div>
                    </div>
                    <div class="weui-cells__title">故障详情（选填）</div>
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <textarea class="weui-textarea" name="detail" placeholder="请在此输入故障详情..." rows="2"></textarea>
                                <div class="weui-textarea-counter"><span>0</span>/200</div>
                            </div>
                        </div>
                    </div>

                    <div class="weui-gallery" id="gallery">
                        <span class="weui-gallery__img" id="galleryImg"></span>
                        <div class="weui-gallery__opr">
                            <a href="javascript:" class="weui-gallery__del">
                                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
                            </a>
                        </div>
                    </div>
                    <input id="urlInput" type="hidden" name="urls" value="">
                    <div class="weui-cells weui-cells_form">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <div class="weui-uploader">
                                    <div class="weui-uploader__hd">
                                        <p class="weui-uploader__title">图片上传</p>
                                    </div>
                                    <div class="weui-uploader__bd">
                                        <ul class="weui-uploader__files" id="uploaderFiles">

                                        </ul>
                                        <div class="weui-uploader__input-box">
                                            <input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="page__bd page__bd_spacing" style="margin-bottom: 50px">
                        <btn class="weui-btn weui-btn_primary" onclick="sumbitRecordForm()" >确定提交</btn>
                    </div>
                </form>

            </div>
            <div id="tab1" class="weui-tab__bd-item">
                <div class="weui-cell after">
                    <div class="weui-cell__bd">
                        <label class="weui-label">开始时间从</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2018/01/01" data-toggle='date' class="weui-input afterCalendar"  onchange="getData('all', $('#area1'))" />
                    </div>
                </div>

                <div class="weui-cell before">
                    <div class="weui-cell__bd">
                        <label class="weui-label">到</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2022/01/01"  data-toggle='date' class="weui-input beforeCalendar" onchange="getData('all', $('#area1'))" />
                    </div>
                </div>

                <div id="area1">

                </div>
                <!--

                <div class="weui-infinite-scroll">
                    <div class="infinite-preloader"></div>
                    正在加载...
                </div>
                -->
            </div>
            <div id="tab2" class="weui-tab__bd-item">
                <div class="weui-cell after">
                    <div class="weui-cell__bd">
                        <label class="weui-label">开始时间从</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2018/01/01" data-toggle='date' class="weui-input afterCalendar"  onchange="getData('notEnd', $('#area2'))" />
                    </div>
                </div>

                <div class="weui-cell before">
                    <div class="weui-cell__bd">
                        <label class="weui-label">到</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2022/01/01"  data-toggle='date' class="weui-input beforeCalendar" onchange="getData('notEnd', $('#area2'))" />
                    </div>
                </div>
                <div id="area2">

                </div>
            </div>
            <div id="tab3" class="weui-tab__bd-item">
                <div class="weui-cell after">
                    <div class="weui-cell__bd">
                        <label class="weui-label">开始时间从</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2018/01/01" data-toggle='date' class="weui-input afterCalendar"  onchange="getData('end', $('#area3'))" />
                    </div>
                </div>

                <div class="weui-cell before">
                    <div class="weui-cell__bd">
                        <label class="weui-label">到</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input type="text" value="2022/01/01"  data-toggle='date' class="weui-input beforeCalendar" onchange="getData('end', $('#area3'))" />
                    </div>
                </div>
                <div id="area3">

                </div>
            </div>
        </div>
    </div>
    <!--
    <div class="weui-tabbar" >
        <a href="#maintab1" class="weui-tabbar__item weui-bar__item--on">
            <div class="weui-tabbar__icon">
                <i class="fa fa-gavel"></i>
            </div>
            <p class="weui-tabbar__label">报修</p>
        </a>
        <a href="#maintab2" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <i class="fa fa-address-card-o"></i>
            </div>
            <p class="weui-tabbar__label">记录详情</p>
        </a>
    </div>
     -->
<!-- body 最后 -->
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
<script type="text/javascript" src="/static/js/zepto.min.js"></script>
<!-- 如果使用了某些拓展插件还需要额外的JS -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
<script th:src="@{~/mobile/start/HomePage.js}"></script>
@@ include("../../pc/upload.jsp"){} $$
<script type="text/javascript">

    $(document).ready(function(){
        //页面加载时，'全部'tab接收数据并显示。
        getData('all', $('#area1'));
        getRoomAndClassify();
        $(".beforeCalendar").calendar();
        $(".afterCalendar").calendar();
    });

    $(function() {
        var tmpl = '<li class="weui-uploader__file" src="#src#" style="background-image:url(#url#)"></li>',
            $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");

        $uploaderInput.on("change", function(e) {
            var src, url = window.URL || window.webkitURL || window.mozURL,
                files = e.target.files;
            for(var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                if(url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }
                var base64;
                r = new FileReader();
                r.readAsDataURL(file);
                r.onload = function(e) {
                    base64 = e.target.result;
                    $uploaderFiles.append($(tmpl.replace('#url#', src).replace('#src#', base64)));
                };
            }
        });
        var index; //第几张图片
        $uploaderFiles.on("click", "li", function() {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function() {
            $gallery.fadeOut(100);
        });
        //删除图片
        $(".weui-gallery__del").click(function() {
            $uploaderFiles.find("li").eq(index).remove();
        });

        $("#areaSelect").on("change", function () {
            getRoomAndClassify();
        });
    });

    function sumbitRecordForm() {
        //先处理图片上传问题，其中uploaderFiles中的li元素的src值即为图片base64码
        var imageList = new Array();
        $("#uploaderFiles li").each(function () {
            var tmp = $(this).attr("src").replace(',','@');
            imageList.push(tmp);
        });
        $.post("/mobile/repair/submitphoto", {imageList:imageList}, function(result){
            if(result.statusCode == 'NO'){
                var urls = "";
                $.each(result.data, function (i, imageName) {
                    urls += imageName + ",";
                });
                if(urls != "") urls = urls.substring(0, urls.length-1);
                $('#urlInput').val(urls);
                sumbitForm();
            }else{
                $.toast("图片上传失败！", "forbidden");
            }
        });
    }

    function sumbitForm() {
        $.post("/mobile/repair/submit", $('#recordForm').serialize(), function(result){
            if(result.statusCode == 'NO'){
                $.toast("提交表单成功！");
                window.location.href="/mobile/registrant/submitsuccess";
            }else{
                $.toast("提交表单失败！", "forbidden");
            }
        });
    }

    function getRoomAndClassify() {
        var $areaSelect = $("#areaSelect"),
            $roomSelect = $("#roomSelect"),
            $classifySelect = $("#classifySelect");
        var posturl = "/mobile/repair/area/" + $areaSelect.val();
        $.get(posturl, null, function(result){
            if(result.statusCode == 'NO'){
                $roomSelect.empty();
                $classifySelect.empty();
                $.each(result.data.rooms, function (i, domain) {
                    $roomSelect.append('<option value="' + domain.room + '">' + domain.room + '</option>');
                });
                $.each(result.data.classifies, function (i, classify) {
                    $classifySelect.append('<option value="' + classify.id + '">' + classify.name + '</option>');
                });
            }else{
                $.toast("获取区域信息失败！", "forbidden");
            }
        });
    }

    //获取最新数据，并清空历史内容，将新数据追加
    function getData(type, area){
        area.empty();
        var reg = new RegExp("/","g");
        var after = area.siblings(".after").find(".afterCalendar").val().replace(reg,'-'),
            before = area.siblings(".before").find(".beforeCalendar").val().replace(reg,'-');
        $.post("/mobile/repair/history", {after:after, before:before, type:type}, function(result){
            if(result.statusCode == 'NO'){
                if(result.data.length == 0){
                    area.append("暂无数据");
                }
                else{
                    $.each(result.data, function (i, proc) {
                        area.append(getElement(proc));
                    });
                }
            }else{
                area.append("数据接收失败！");
            }
        });
    }

    function getElement(proc) {
        var assignName = (proc.assignee == "")?'无':proc.assignee,
            endTime = (proc.endTime == null)?'未结束':proc.endTime;
        var str =
            '<div class="weui-form-preview">' +
            '<div class="weui-form-preview__hd">' +
            '<label class="weui-form-preview__label">接管人</label>' +
            '<em class="weui-form-preview__value">' +
            assignName+ '</em>' +
            '</div>' +
            '<div class="weui-form-preview__bd">' +
            '<div class="weui-form-preview__item">' +
            '<label class="weui-form-preview__label">流水单号</label>' +
            '<span class="weui-form-preview__value">' + proc.id + '</span>' +
            '</div>' +
            '<div class="weui-form-preview__item">' +
            '<label class="weui-form-preview__label">起始时间</label>' +
            '<span class="weui-form-preview__value">' + proc.startTime + '</span>' +
            '</div>' +
            '<div class="weui-form-preview__item">' +
            '<label class="weui-form-preview__label">结束时间</label>' +
            '<span class="weui-form-preview__value">' + endTime + '</span>' +
            '</div>' +
            '</div>' +
            '<div class="weui-form-preview__ft">' +
            '<a type="submit" class="weui-form-preview__btn weui-form-preview__btn_primary" href="/mobile/repair/proc/' + proc.vars.recordId + '">查看详情</a>' +
            '</div>' +
            '</div>';
        return str;
    }

    // var loading = false;  //状态标记
    // $(document.body).infinite().on("infinite", function() {
    //     if(loading) return;
    //     loading = true;
    //     setTimeout(function() {
    //         $("#tab1").append("<p> 我是新加载的内容 </p>");
    //         loading = false;
    //     }, 1500);   //模拟延迟
    // });

</script>
</body>
</html>